<template>
  <div>
    <x-Table
      :loading="loading"
      :table-data="tableData"
      :options-data="options"
      :pagination="pagination"
      :rule-form="ruleForms"
      @handleAdd="handleAdd"
      @handlePaginationCurrentChange="handlePaginationCurrentChange"
      @handlePaginationSizeChange="handlePaginationSizeChange"
      @handleHeardDel="handleHeardDel"
      @searchForm="searchForm"
      @resetForm="resetForm"
    >
      <!--        课程分页-->
      <template slot="selectClass">
        <el-form-item label="课程名称">
          <el-select :loading="selectClass" @clear="classClear" :remote-method="classFilterMethod" remote
                     filterable
                     v-model="ruleForms['class_id']['class_id']"
                     clearable placeholder="请选择">
            <el-option
              style='width: 260px;text-align: center'
              v-for="item in rule[0]['options']"
              :key="item.id"
              :label="item.title  "
              :value="item.id">
            </el-option>
            <el-pagination
              @current-change="classCurrentChange"
              small
              layout="prev, pager, next"
              :page-size="20"
              :current-page="pageSizes.classPage.currentPage"
              :total="pageSizes.classPage.total">
            </el-pagination>
          </el-select>
        </el-form-item>
      </template>
      <!--        end-->
    </x-Table>
    <!--    弹窗区域-->

    <el-dialog
      v-dialog-drag
      :title="alertTitle"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="45%"
    >
      <form-create
        v-model="fapi"
        :rule="rule"
        :option="option"
        :value.sync="formParam"
        @submit="onSubmit"
      >
        <!--        课程分页-->
        <template slot="type-page-select-class">
          <el-select multiple :loading="selectClass" @clear="classClear" :remote-method="classFilterMethod" remote
                     filterable
                     v-model="rule[0]['value']"
                     clearable placeholder="请选择">
            <el-option
              style='width: 260px;text-align: center'
              v-for="item in rule[0]['options']"
              :key="item.id"
              :label="item.title  "
              :value="item.id">
            </el-option>
            <el-pagination
              @current-change="classCurrentChange"
              small
              layout="prev, pager, next"
              :page-size="20"
              :current-page="pageSizes.classPage.currentPage"
              :total="pageSizes.classPage.total">
            </el-pagination>
          </el-select>
        </template>
        <!--        end-->
      </form-create>
    </el-dialog>
    <!--    end-->
  </div>
</template>

<script>
let _this;
export default {
  data() {
    return {
      searchParams: {},//搜索对象
      selectClass: true,
      pageSizes: {
        classPage: {
          currentPage: 1,
          total: 0,
        },//课程分页参数
      },
      loading: true,
      row: null, //当前选择数据
      ruleForms: {
        class_id: {label: "课程名称", prop: "class_id", type: "slot", major_id: '', slot: 'selectClass'},
      },
      pagination: {
        currentPage: 1,
        pageSize: 20,
        pageSizes: [10, 20, 50, 100],
      }, //分页参数
      otherParam: {
        halfCheckedKeys: [],
      }, //如果有其他情况会拼接这个参数
      fapi: {},
      formParam: {},
      rule: [
        {
          "type": "pageSelectClass",
          "field": "class_id",
          "title": "课程名称",
          "info": "",
          "options": [],
          "hidden": false,
          "display": true,
          "value": '',
          "validate": [
            {
              "trigger": "change",
              "mode": "required",
              "message": "请选择课程",
              "required": true,
              "type": 'array'
            },

          ]
        },
        {
          "type": "inputNumber",
          "field": "video_ratio",
          "title": "视频学习占比",
          "info": "",
          "props": {
            "min": 0,
            "max": 100
          },
          "_fc_drag_tag": "inputNumber",
          "hidden": false,
          "display": true
        },
        {
          "type": "inputNumber",
          "field": "work_ratio",
          "title": "阶段测评占比",
          "info": "",
          "props": {
            "min": 0,
            "max": 100
          },
          "_fc_drag_tag": "inputNumber",
          "hidden": false,
          "display": true
        },
        {
          "type": "inputNumber",
          "field": "text_ratio",
          "title": "综合测评占比",
          "info": "",
          "props": {
            "min": 0,
            "max": 100
          },
          "_fc_drag_tag": "inputNumber",
          "hidden": false,
          "display": true
        },
        {
          "type": "FcRow",
          "children": [
            {
              "type": "col",
              "props": {
                "span": 12
              },
              "children": [
                {
                  "type": "datePicker",
                  "field": "work_start_time",
                  "title": "阶段测评开始时间",
                  "info": "",
                  "props": {
                    "type": "datetime"
                  },
                  "_fc_drag_tag": "datePicker",
                  "hidden": false,
                  "display": true,
                  "validate": [
                    {
                      "trigger": "change",
                      "mode": "required",
                      "message": "请选择阶段测评开始时间",
                      "required": true,
                      "type": "string"
                    }
                  ]
                }
              ],
              "_fc_drag_tag": "col",
              "hidden": false,
              "display": true
            },
            {
              "type": "col",
              "props": {
                "span": 12
              },
              "children": [
                {
                  "type": "datePicker",
                  "field": "work_end_time",
                  "title": "阶段测评结束时间",
                  "info": "",
                  "props": {
                    "type": "datetime"
                  },
                  "_fc_drag_tag": "datePicker",
                  "hidden": false,
                  "display": true,
                  "validate": [
                    {
                      "trigger": "change",
                      "mode": "required",
                      "message": "请选择阶段测评结束时间",
                      "required": true,
                      "type": "string"
                    }
                  ]
                }
              ],
              "_fc_drag_tag": "col",
              "hidden": false,
              "display": true
            }
          ],
          "_fc_drag_tag": "row",
          "hidden": false,
          "display": true
        },
        {
          "type": "FcRow",
          "children": [
            {
              "type": "col",
              "props": {
                "span": 12
              },
              "children": [
                {
                  "type": "datePicker",
                  "field": "exam_start_time",
                  "title": "综合测评开始时间",
                  "info": "",
                  "props": {
                    "type": "datetime"
                  },
                  "_fc_drag_tag": "datePicker",
                  "hidden": false,
                  "display": true,
                  "validate": [
                    {
                      "trigger": "change",
                      "mode": "required",
                      "message": "请选择综合测评开始时间",
                      "required": true,
                      "type": "string"
                    }
                  ]
                }
              ],
              "_fc_drag_tag": "col",
              "hidden": false,
              "display": true
            },
            {
              "type": "col",
              "props": {
                "span": 12
              },
              "children": [
                {
                  "type": "datePicker",
                  "field": "exam_end_time",
                  "title": "综合测评结束时间",
                  "info": "",
                  "props": {
                    "type": "datetime"
                  },
                  "_fc_drag_tag": "datePicker",
                  "hidden": false,
                  "display": true,
                  "validate": [
                    {
                      "trigger": "change",
                      "mode": "required",
                      "message": "请选择综合测评结束时间",
                      "required": true,
                      "type": "string"
                    }
                  ]
                }
              ],
              "_fc_drag_tag": "col",
              "hidden": false,
              "display": true
            }
          ],
          "_fc_drag_tag": "row",
          "hidden": false,
          "display": true
        }
      ],
      option: {
        form: {
          inline: false,
          labelPosition: "right",
          size: "small",
          labelWidth: "135px",
          hideRequiredAsterisk: false,
          showMessage: true,
          inlineMessage: false,
        },
        resetBtn: true,
      },
      dialogVisible: false,
      alertTitle: "添加",
      tableData: [],
      options: {
        fields: {
          id: {label: "ID", prop: "id", width: "120", order: true},
          class_id: {label: "课程名称", prop: "class_id", type: 'two', options: {obj: 'OfficeClass', objKey: 'title'}},
          video_ratio: {label: "视频占比", prop: "video_ratio", type: 'progress'},
          work_ratio: {label: "阶段测评占比", prop: "work_ratio", type: 'progress'},
          text_ratio: {label: "综合测评占比", prop: "text_ratio", type: 'progress'},
          work_start_time: {label: "阶段测评开始时间", prop: "work_start_time"},
          work_end_time: {label: "阶段测评开始结束", prop: "work_end_time"},
          exam_start_time: {label: "综合测评开始结束", prop: "exam_start_time"},
          exam_end_time: {label: "阶段测评结束结束", prop: "exam_end_time"},
          create_time: {label: "创建时间", prop: "create_time"},
          button: {
            label: "操作",
            width: "130",
            type: "func",
            fixed: true,
            edit: function (scope) {
              setTimeout(() => {
                _this.fapi.setValue("class_id", '');
                let data = [];
                data.push(scope["row"].class_id)
                _this.fapi.setValue("class_id", data);
                _this.fapi.setValue("video_ratio", scope["row"]['video_ratio']);
                _this.fapi.setValue("work_ratio", scope["row"]['work_ratio']);
                _this.fapi.setValue("text_ratio", scope["row"]['text_ratio']);
                _this.fapi.setValue("work_start_time", scope["row"]['work_start_time']);
                _this.fapi.setValue("work_end_time", scope["row"]['work_end_time']);
                _this.fapi.setValue("exam_end_time", scope["row"]['exam_end_time']);
                _this.fapi.setValue("exam_start_time", scope["row"]['exam_start_time']);
              }, 0);
              _this.row = scope["row"];
              _this.alertTitle = "编辑";
              _this.dialogVisible = true;
            },
            del: function (scope) {
              _this.deleteDate(scope["row"].id);
            },
          },
        },
      },
    };
  },
  methods: {
    resetForm:function (){
      _this.searchParams = {};
    },
    classCurrentChange: function (val) {
      _this.getClassList(val);
    },
    /**
     * 查询课程数据
     */
    getClassList: function (page = 1, title) {
      _this.selectClass = true;
      _this.$store
        .dispatch("office/getClassSelectList", {
          page: page,
          title: title,
        })
        .then((res) => {
          _this.selectClass = false;
          _this.rule[0].options.length = 0;
          res.data.data.forEach((item) => {
            let obj = {
              id: item.id,
              title: item.title,
            }
            _this.rule[0].options.push(obj);
          })
          _this.pageSizes.classPage.currentPage = res.data.current_page;
          _this.pageSizes.classPage.total = res.data.total;

        });
    },

    classClear: function () {
      _this.getClassList();
    },

    classFilterMethod: function (val) {
      _this.getClassList(1, val);
    },

    handlePaginationCurrentChange: function (val) {
      _this.loading = true;
      _this.pagination["currentPage"] = val;
      _this.getDateList(_this.searchParams);
    },

    handlePaginationSizeChange: function (val) {
      _this.loading = true;
      _this.pagination["pageSize"] = val;
      _this.getDateList(_this.searchParams);
    },

    /**
     * 查询所有数据
     */
    getDateList: function (val) {
      _this.loading = true;
      _this.$store
        .dispatch("office/getRulesList", {
          class_id: val ? val['class_id'] : '',
          page: _this.pagination["currentPage"],
          pageSize: _this.pagination["pageSize"],
        })
        .then(() => {
          _this.loading = false;
          _this.dialogVisible = false;
          let data = _this.$store.state.office.rulesList;
          this.tableData = data.data;
          console.log(data);
          _this.pagination["currentPage"] = data["current_page"];
          _this.pagination["total"] = data["total"];
        });
    },


    /**
     * 批量删除
     */
    handleHeardDel: function (val) {
      let del = [];
      val.forEach((item, index) => {
        del.push(item.id);
      });
      _this.deleteDate(del);
    },


    /**
     * 表单提交回调
     */
    onSubmit: function (val) {
      if (_this.row) {
        let class_id = _this.fapi.getValue('class_id');
        if (class_id.length !== 1) {
         _this.$message.error("只能选择一门课程");
         return;
        }
      }
      _this.createOrUpdateDate(val);
    },

    /**
     * 搜索角色标题
     */
    searchForm: function (val) {
      _this.searchParams = val;
      _this.getDateList(val);
    },
    /**
     * 添加或者更新
     */
    createOrUpdateDate: function (param) {
      _this.$store
        .dispatch("office/rulesCreateOrUpdate", {
          id: _this.row ? _this.row["id"] : '',
          class_id: param["class_id"].join(),
          video_ratio: param["video_ratio"],
          work_ratio: param["work_ratio"],
          text_ratio: param["text_ratio"],
          work_start_time:param['work_start_time'],
          work_end_time:param['work_end_time'],
          exam_end_time:param['exam_end_time'],
          exam_start_time:param['exam_start_time'],
        })
        .then((res) => {
          const {data, msg} = res;
          if (data) {
            _this.getDateList();
            _this.$message.success(msg);
            return;
          }
          return _this.$message.error(msg);
        });
    },

    /**
     * 删除角色
     */
    deleteDate: function (val) {
      _this.$store
        .dispatch("office/deleteRules", {
          id: val,
        })
        .then((res) => {
          const {data, msg} = res;
          if (data) {
            _this.getDateList();
            _this.$message.success(msg);
            return;
          }
          return _this.$message.error(msg);
        });
    },

    /**
     *  表单导航栏添加点击
     */
    handleAdd: function () {
      _this.alertTitle = "添加";
      this.dialogVisible = true;
      _this.row = null;
    },
  },
  watch: {
    dialogVisible(newVal) {
      setTimeout(() => {
        if (!newVal) {
          _this.fapi.resetFields(); //清空数据
          _this.fapi.setValue('content', '');
        }
      }, 0);
    },
  },
  created() {
    _this = this;
    _this.getDateList();
    _this.getClassList()

  }
};
</script>

<style scoped></style>
